<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="service.serviceimpl.ServiceUserImpl" %>
<%@ page import="entity.Userinfo" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        table {
            display: block;
            width: 400px;
            margin: auto;
        }

        p {
            width: 100px;
            margin: auto;
        }

        p {
            color: red;
        }
    </style>
    <script src="../js/waibu.js"></script>
</head>
<body>
<%--<c:if test="${status.index%2==0}">style="background-color: red" </c:if>--%>
<table border="4">
    <tr>
        <th>人员列表</th>
    </tr>
    <tr>
        <th>id</th>
        <th>name</th>
        <th>sex</th>
        <th>age</th>
        <th>ranking</th>
        <th>dept</th>
        <th>操作</th>
    </tr>
    <c:forEach items="${list}" var="xjj" varStatus="status">
        <tr>
            <td>${xjj.id}</td>
            <td>${xjj.name}</td>
            <td>${xjj.sex==1?"男":"女"}</td>
            <td>${xjj.age}</td>
            <td>${xjj.ranking}</td>
            <td>${xjj.dept}</td>
            <td>
                <a href="${pageContext.request.contextPath}/ServletTest3?op=delete&id=${xjj.id}"> <input class="delete"
                                                                                                         type="button"     value="删除"></a>
                    <input class="delete2"
                           type="button"
                           value="点我异步删除">
                <input class="delete1"
                          type="button"
                          value="异步删除">
                <a href="${pageContext.request.contextPath}/ServletTest3?op=update1&id=${xjj.id}">修改</a>
            </td>
        </tr>
    </c:forEach>
</table>
<%--<p> <a href="${pageContext.request.contextPath}/ServletTest3?op=add1"> <input  type="button" value=增加></a>--%>
<%--</p>--%>
<p><a href="${pageContext.request.contextPath}/jstlnc/add.jsp"> <input type="button" value=增加></a>
</p>
<p style="color: red">${delete}</p>
<p style="color: red">${update}</p>
<p style="color: red">${add}</p>
<input type="button" value="变色" id="bt">
<script src="../js/waibu.js"></script>
<script src="../js/waibu163.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    <%--$(".delete2").click(function () {--%>
    <%--        if(confirm("删除吗？")){--%>
    <%--            var bt=$(this);--%>
    <%--          var id=  bt.parents("tr").children().eq(0).html();--%>
    <%--          alert(id);--%>
    <%--            $.getJSON("${pageContext.request.contextPath}/ServletTest3?op=delete2&id="+id,--%>
    <%--            function (data) {//不能刷新所以我们只能用js内侧--%>
    <%--                if(data=="y"){--%>
    <%--                    alert("点我异步删除成功");--%>
    <%--                    bt.parents("tr").remove();--%>
    <%--                }else{--%>
    <%--                    alert("点我异步删除失败");--%>
    <%--                }--%>
    <%--            });--%>
    <%--        }--%>
    <%--});--%>








    //$("#bt").css("background-color","red");
    //异步删除
    $(".delete1").click(function () {
        var xx=$(this);
        var id=xx.parents("tr").children().eq(0).html();
        $.get("${pageContext.request.contextPath}/ServletTest3?op=delete1&id="+id,function (data) {
            if(data=="y"){
                xx.parents("tr").remove();
                alert("异步删除成功");
            }else{
                alert("异步删除失败");
            }
        });
    });

    // $("table").css("background-color","yellow");
    // $("tr:odd").css("background-color","green");
    $(".delete").click(function () {
        if (confirm("删除吗？")) {

        } else {
            return false;//把按钮卡死
        }
    });
</script>
</body>
</html>
